<template>
  <view class="install-config-container">
    <view class="header">
      <text class="title">安装配置</text>
    </view>
    <!-- 配置选项 -->
    <view class="config-sections">
      <!-- 电机方向设置 -->
      <view class="config-section">
        <text class="section-title">改变电机方向</text>
        <radio-group class="radio-group" @change="motorDirectionChange">
          <label
            class="radio-item"
            v-for="item in motorDirectionOptions"
            :key="item.value"
          >
            <view>
              <radio
                style="transform: scale(0.7)"
                color="#2c3045"
                :value="item.value"
                :checked="item.value === motorDirection"
              />
            </view>
            <view>{{ item.label }}</view>
          </label>
        </radio-group>
      </view>

      <!-- 开门模式设置 -->
      <view class="config-section">
        <text class="section-title">开门模式</text>
        <radio-group class="radio-group" @change="doorModeChange">
          <label
            class="radio-item"
            v-for="item in doorModeOptions"
            :key="item.value"
          >
            <view>
              <radio
                style="transform: scale(0.7)"
                color="#2c3045"
                :value="item.value"
                :checked="item.value === doorMode"
              />
            </view>
            <view>{{ item.label }}</view>
          </label>
        </radio-group>
      </view>

      <!-- 解绑按钮 -->
      <button class="unbind-btn" @click="handleBind">无线设备绑定</button>
      <button class="unbind-btn" @click="handleUnbind">无线设备解绑</button>
      <!-- 下一步按钮 -->
      <button class="next-btn" @click="handleNext">
        {{ "下一步" }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { MotorDirection, DoorMode } from "@/types";
import { onLoad } from "@dcloudio/uni-app";
import { bluetoothManager, buildPacket } from "@/utils";
onLoad(() => {
  const deviceInfo = uni.getStorageSync("deviceInfo");
  const content = deviceInfo.slice(8).match(/.{1,2}/g) ?? [];
  motorDirection.value = content[7] === "01" ? "Change" : "NoChange";
  doorMode.value = content[8] === "00" ? "Single" : "Double";
});
const motorDirection = ref<keyof typeof MotorDirection>("Change");
const doorMode = ref<keyof typeof DoorMode>("Double");
const motorDirectionOptions = [
  { value: "Change", label: "改变" },
  { value: "NoChange", label: "不改变" },
];

const doorModeOptions = [
  { value: "Single", label: "单开门" },
  { value: "Double", label: "双开门" },
];
const motorDirectionChange = (e: any) => {
  uni.showLoading({
    mask: true,
    title: "发送中...",
  });
  const value = MotorDirection[e.target.value as keyof typeof MotorDirection];
  motorDirection.value = e.target.value;
  console.log(
    [value, DoorMode[doorMode.value as keyof typeof DoorMode]],
    "motorDirectionChange"
  );

  bluetoothManager.sendPacket(
    bluetoothManager.serviceId,
    bluetoothManager.characteristicId,
    buildPacket(0x01, [
      value,
      DoorMode[doorMode.value as keyof typeof DoorMode],
    ])
  );
};
const doorModeChange = (e: any) => {
  uni.showLoading({
    mask: true,
    title: "发送中...",
  });
  const value = DoorMode[e.target.value as keyof typeof DoorMode];
  doorMode.value = e.target.value;
  console.log(
    [
      MotorDirection[motorDirection.value as keyof typeof MotorDirection],
      value,
    ],
    "doorModeChange"
  );
  bluetoothManager.sendPacket(
    bluetoothManager.serviceId,
    bluetoothManager.characteristicId,
    buildPacket(0x01, [
      MotorDirection[motorDirection.value as keyof typeof MotorDirection],
      value,
    ])
  );
};
const handleNext = async () => {
  uni.navigateTo({
    url: "/pages/common-config/common-config",
  });
};

const handleUnbind = () => {
  uni.showLoading({
    mask: true,
    title: "发送中...",
  });
  bluetoothManager.sendPacket(
    bluetoothManager.serviceId,
    bluetoothManager.characteristicId,
    buildPacket(0x01, [
      MotorDirection[motorDirection.value as keyof typeof MotorDirection],
      DoorMode[doorMode.value as keyof typeof DoorMode],
      0x00,
      0x01,
    ])
  );
};
const handleBind = () => {
  uni.showLoading({
    mask: true,
    title: "发送中...",
  });
  bluetoothManager.sendPacket(
    bluetoothManager.serviceId,
    bluetoothManager.characteristicId,
    buildPacket(0x01, [
      MotorDirection[motorDirection.value as keyof typeof MotorDirection],
      DoorMode[doorMode.value as keyof typeof DoorMode],
      0x01,
      0x00,
    ])
  );
};
</script>

<style scoped>
.install-config-container {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 24rpx;
  background: linear-gradient(to bottom, #e6ebff, #f8faff, #ffffff);
  padding-top: calc(env(safe-area-inset-top) + 24rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  padding-left: calc(env(safe-area-inset-left) + 24rpx);
  padding-right: calc(env(safe-area-inset-right) + 24rpx);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.back-btn {
  background: none;
  border: none;
  padding: 16rpx;
  color: #2c3045;
  font-size: 40rpx;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: #666;
}

.back-icon {
  font-size: 40rpx;
}

.title {
  color: #2c3045;
  font-size: 32rpx;
  font-weight: bold;
}

.placeholder {
  width: 80rpx;
}

.config-sections {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.config-section {
  background-color: #ecedf4;
  padding: 24rpx;
  border-radius: 16rpx;
}

.section-title {
  color: #2c3045;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
  display: block;
}

.radio-group {
  display: flex;
  gap: 32rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 200rpx;
}

.radio-input {
  display: none;
}

.radio-button {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 3rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  transition: border-color 0.3s ease;
}

.radio-button.selected {
  border-color: #2c3045;
}

.radio-dot {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #2c3045;
}

.radio-label {
  color: #2c3045;
  font-size: 26rpx;
}

.next-btn {
  width: 100%;
  padding: 20rpx 32rpx;
  background-color: #2c3045;
  color: white;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 8rpx 16rpx rgba(44, 48, 69, 0.3);
  transition: all 0.3s ease;
  margin-top: 32rpx;
}

.next-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 12rpx 24rpx rgba(44, 48, 69, 0.4);
}

.unbind-btn {
  width: 100%;
  padding: 16rpx 24rpx;
  border: 1rpx solid #ddd;
  color: #666;
  font-size: 24rpx;
  font-weight: 500;
  background-color: transparent;
  margin: 16rpx 0;
  transition: all 0.3s ease;
}

.unbind-btn:hover {
  background-color: #f5f5f5;
}
</style>
